<template>
  <div class="warp">
    <h1>this is user vm</h1>
    <span>user id : {{$route.params.id}}</span>
    <input type="text" v-model="inputData">
    <div v-if="userId">
      <span>userid: {{userId}}</span>
      <span>nextPath: {{nextPath}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: "UserVm",
        inputData:'',
        userId:'',
        nextPath:''
      }
    },
    watch: {
      '$route'(to, from) {
        this.inputData = '';
        this.userId = this.$route.params.id;
        this.nextPath = to.path;
      }
    },
    beforeRouteEnter(to,from,next){
      let path = to.path;
      next(path === '/user/1',vm=>{
        vm.nextPath = path;
        console.log("nextPath: " + vm.nextPath);
      });
    },
    beforeRouteUpdate(to,from,next){
      let path = to.path;
      if(path === '/user/3')
      {
        next({path:'/errorPage'});
      }else{
        next();
      }

    }
  }
</script>

<style scoped>
  .warp {
    width: 95%;
    margin: 5px auto;
    border: 1px red dashed;
    text-align: center;
  }
</style>
